<script type='text/javascript'><!--		
		
	var oldPic;
	
	$(document).ready(function(){
		 oldPic = $('#preview_av').attr('src');
	});

	
	function saveAvatar(){
		//alert("x:"+$('#x').val()+"y:"+$('#y').val()+"w:"+$('#w').val()+"h:"+$('#h').val())
		$.post('php/uploadify/saveAvatar.php', {step: $('#step').val(), tempfile: $('#tempfile').val(), x: $('#x').val(), y: $('#y').val(), w: $('#w').val(), h: $('#h').val()},
				
			function(data){
				if(data.status == 'success'){
					resetAvatar();
					var d = new Date();
					$('#preview_av').attr('src', data.message+"?"+d.getTime());
					$('#preview_av').css({
									margin: '0px',
									width: '36px',
									height: '36px'});
				}else{
					resetAvatar();
				}
			}
		, 'json');
	}

	function showUpload(toggle) {
		if(toggle=='1'){
			$('#upload_popup').show();
			$('#overlay').fadeIn();
		}else{
			$('#upload_popup').hide();
			$('#overlay').fadeOut();
		}
	};

	$(function() {
		$('#uploadify').uploadify({
			'uploader'       : 'swf/uploadify/uploadify.swf',
			'script'         : 'php/uploadify/upload.php',
			'cancelImg'      : 'media/uploadify/cancel.png',
			'folder'         : 'media/userAvatar',
			'queueID'        : 'fileQueue',
			'auto'           : true,
			'buttonText'     : 'upload',
			'hideButton'	 : true,
			'wmode'			 : 'transparent',
			'queueSizeLimit' : 1,
			'multi'          : false,
			'fileDesc'	     : 'Image files',
			'fileExt'	     : '*.jpg;*.png;*.bmp',
			'sizeLimit'      : '1819200',//max size bytes - 800kb
			'onComplete'  	 : function(event,queueID,fileObj,response,data) {
						$('#uploadifyUploader').remove();
						var dataresponse = eval('(' + response + ')');
						if(dataresponse.result == '1'){
							var filenametmp = (dataresponse.file).substring(0,(dataresponse.file).lastIndexOf('?'));		
							$('#tempfile').val(filenametmp);
							var img = new Image();
							$(img).load(function () {
								imgpos.width  = dataresponse.imagewidth;
								imgpos.height = dataresponse.imageheight;
								$('#cropbox').remove();
								$('.jcrop-holder').remove();
								$(this).attr('id','cropbox');
								$(this).hide();
								$('#image_container').append(this);

								$(this).fadeIn().Jcrop({
										onChange: showPreview,
										onSelect: showPreview,
										aspectRatio: 0,
										onSelect: updateCoords,
										setSelect: [0,0,36,36]
									});

								$('#preview_av').remove();
								var _imgprev = $(document.createElement('img')).attr('id','preview_av').attr('src',dataresponse.file);
								$('#preview_av_container').append(_imgprev);

								if(!$('#_crop_bttn').length){
									var _crop_bttn = $(document.createElement('input')).attr('id','_crop_bttn').attr('type','submit').val('save');
									var _crop_cancel_bttn = $(document.createElement('input')).attr('id','_crop_cancel_bttn').attr('type','submit').val('cancel');
									_crop_cancel_bttn.click(
										function(){
											$('#step').val('cancel');
											$('#preview_av').attr('src', oldPic);
											$('#preview_av').css({
												width: '36px',
												height: '36px',
												marginLeft: '0px',
												marginTop: '0px'
											});
											resetAvatar();
										}
									);	
									_crop_bttn.click(
										function(){
											$('#step').val('process');
											saveAvatar();
										}
									);	
									$('#cropattrform').append(_crop_bttn).append(_crop_cancel_bttn);
								}
							}).attr('src', dataresponse.file);
						}else{
							alert('error');
						}
					},				
			'onError'		 : function(){
									//alert('error');
							   }
		});
	});   
	function updateCoords(c)
	{
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
	function checkCoords()
	{
		if (parseInt($('#w').val())){
			return true;
		}	
		$('#x').val(0);
		$('#y').val(0);
		$('#w').val(36);
		$('#h').val(36);
		return true;
	};
	function showPreview(coords)
	{
		if (parseInt(coords.w) > 0)
		{
			var rx =  36 / coords.w;
			var ry = 36/ coords.h;
			$('#preview_av').css({
				width: Math.round(rx * imgpos.width) + 'px',
				height: Math.round(ry * imgpos.height) + 'px',
				marginLeft: '-' + Math.round(rx * coords.x) + 'px',
				marginTop: '-' + Math.round(ry * coords.y) + 'px'
			});
		}
	};	
	var imgpos = {
			width	: '36',
			height	: '36'
	};
	

	//-->
</script>

	<div id='upload_popup_header' class='jqDrag'>
		<div class='fl-left normal-text bold-text blue-text pad-5'>Upload avatar</div>
		 <a class='close' href="javascript:resetAvatar()" ><img class='pad-5' src='media/uploadify/cancel.png'/></a>
	</div>
	<div id='upload_popup_body' class='content'>
		<div class='left'>
			<div id='button_wrapper'>
				<input type='file' name='uploadify' id='uploadify' />
			</div>
			<input type='submit' value='Upload' style="z-index: -1; position:absolute;"/>
			<div>
				<div id='fileQueue'></div>
			</div>
		</div>	
		<div class='right'>
			<div id='image_container'>
		</div>	
		<form id='cropattrform' action='javascript:saveAvatar();' method='post' onsubmit='return checkCoords();'>
			<input type='hidden' id='x' name='x' />
			<input type='hidden' id='y' name='y' />
			<input type='hidden' id='w' name='w' />
			<input type='hidden' id='h' name='h' />
			<input type='hidden' id='tempfile' name='tempfile' />
			<input type='hidden' class='jq_step' id='step' name='step' value='process' />
		</form>
		</div>
	</div>
